<template>
    <pull-to
        :bottom-load-method="infiniteHandler"
        :bottom-config="BOTTOM_DEFAULT_CONFIG"  style="min-height: 100vh;background:#f5f5f5">
        <van-tabs v-model="active" :sticky='true'>
            <van-tab title="申请中">
                <ul v-if="data.all_count!=0">
                    <li v-for="(item,index) in data.list" :key="index">
                        <p style="border-bottom: 1px solid #f5f5f5;"><span>{{item.title}}</span><span>￥{{item.price}}</span></p>
                        <p style="font-size: 12px">申请时间：{{item.apply_time}}</p>
                    </li>
                </ul>
                <div v-else class="empty">
                    <img src="@/assets/img/empty.png" alt="">
                    <p>还没产生记录哦~</p>
                </div>
            </van-tab>
            <van-tab title="已完成">
                <ul v-if="data.all_count!=0">
                    <li v-for="(item,index) in data.list" :key="index">
                        <p style="border-bottom: 1px solid #f5f5f5;"><span>{{item.title}}</span><span>￥{{item.price}}</span></p>
                        <p style="font-size: 12px">申请时间：{{item.apply_time}}</p>
                    </li>
                </ul>
                <div v-else class="empty">
                    <img src="@/assets/img/empty.png" alt="">
                    <p>还没产生记录哦~</p>
                </div>
            </van-tab>
            <van-tab title="已驳回">
                <ul v-if="data.all_count!=0">
                    <li v-for="(item,index) in data.list" :key="index">
                        <p style="border-bottom: 1px solid #f5f5f5;"><span>{{item.title}}</span><span>￥{{item.price}}</span></p>
                        <p style="font-size: 12px">申请时间：{{item.apply_time}}</p>
                    </li>
                </ul>
                <div v-else class="empty">
                    <img src="@/assets/img/empty.png" alt="">
                    <p>还没产生记录哦~</p>
                </div>
            </van-tab>
        </van-tabs>
    </pull-to>
</template>

<script>
    import request from "@/request/index.js"
    import PullTo from 'vue-pull-to';
    export default {
        name: "cashDetail",
        components:{
            PullTo
        },
        data(){
            return{
                page:1,
                status:3,
                active:0,
                data:{},
                BOTTOM_DEFAULT_CONFIG: {
                    pullText: "上滑继续加载",
                    triggerText: "释放更新",
                    loadingText: "加载中,请稍后",
                    doneText: "内容已全部展示了",
                    failText: "加载失败",
                    loadedStayTime: 1000,
                    stayDistance: 50,
                    triggerDistance: 50,
                },
            }
        },
        watch:{
            active(newVal,oldVal){
                if(newVal==0){
                    this.status=3
                }else if(newVal==1){
                    this.status=1
                }else if(newVal==2){
                    this.status=2
                }
                request.withdrawInfo(this);
            }
        },
        methods:{
            infiniteHandler:function(loaded){
                this.page++;
                request.getGoodsByCid(this);
                if(this.page<this.allPage){
                    this.BOTTOM_DEFAULT_CONFIG.doneText = this.BOTTOM_DEFAULT_CONFIG.pullText;
                    loaded("done");
                    request.getGoodsByCid(this);
                }else{
                    this.BOTTOM_DEFAULT_CONFIG.doneText = "内容已全部展示";
                    loaded("done");
                    this.loaded = true;
                }
            },
        },
        created(){

        },
        mounted(){
            request.withdrawInfo(this);
        }
    }
</script>

<style scoped lang="scss">
  ul{
      li{
          padding: 0 4vw;
          margin-top: 15px;
          background: #ffffff;
          p{
              font-size: 15px;
              color: #333333;
              line-height: 50px;

              span:last-child{
                  float:right;
                  font-size: 20px;
              }
          }
      }

  }
    .empty{
        text-align: center;
        padding-top: 180px;
        color: #333333;
        img{
            width: 114px;
            margin-bottom: 10px;
        }
    }
</style>
